<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script crossorigin src="../js/react.production.min.js"></script>
    <!-- 核心库  最先引用 -->
    <script crossorigin src="../js/react-dom.production.min.js"></script>
    <!-- 引用react-dom 用于支持react操作DOM -->
    <script crossorigin src="../js/babel.min.js"></script>
    <!-- 引入babel 用于将jsx转为js -->
    <script crossorigin src="../js/prop-types.js"></script>
    <!-- 对组件标签进行限制 -->
    <title>学习react</title>
</head>

<body>
    <div id="test"></div>
    <div id="test1"></div>
    <script type="text/babel">

        // class MyDemo extends React.Component {
        //     render() {
        //         console.log(this.props)
        //         const { name, age } = this.props
        //         return <ul><li>姓名:{name}</li><li>年龄：{age + 1}</li></ul>
        //     }
        //     static defaultProps = {  // 默认年龄
        //         age: 20
        //     }
        //     static propTypes = {
        //         name: PropTypes.string.isRequired, // string 类型 必填
        //         age: PropTypes.number, // number 类型
        //         speak: PropTypes.func // function 类型 
        //     }
        // }


        function MyDemo(props) { // 函数式组件只能使用props
            console.log(props);
            const { name, age } = props
            return <ul><li>{props.name}</li><li>{props.age}</li></ul>
        }
        MyDemo.defaultProps = {  // 默认年龄
            age: 20
        }
        
        ReactDOM.render(<MyDemo name='tom1' />, document.getElementById("test"));
    </script>
</body>

</html>